<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
       <!-- 输入回车 或者失去焦点的时候 才会同步对应的数据 -->
       <input type="text" v-model.lazy="inputValue">
       <h5 v-cloak>inputValue 的值是 {{inputValue}}</h5>
        
       <!-- vmodel默认是会传入string类型的值，用.number修饰符可以转换成数字 -->
       <input type="number" v-model.number='inputValue'>
       <h5>{{typeof inputValue}}</h5>

       <!-- 自动去除给服务器的数据的两边空格 -->
        <input type="text" v-model.trim="trimInputValue">
        <h5>浏览器会自动去除空格符，用app.trimInputValue观看效果</h5>
   </div> 
   <script src="../../vue.js"></script>
   <script>
       const app = new Vue({
           el:'#app',
           data:{
               inputValue:'',
               trimInputValue:''
           }

       })
   </script>
</body>
</html>